import React, {
  Component
} from 'react'
import {
  StyleSheet,
  View,
  ListView,
  Image,
  Text,
  TouchableOpacity
} from 'react-native'
import {Icon} from '../../components/common/icon'
import NavigationBar from '../../components/common/NavigationBar'
import Login from '../Login'

class FamilyInfo extends Component {
  constructor(props) {
    super(props)
    // 初始状态
    this.state = {
      list: [{
        name: '周杰伦的家',
        type: 1
      },{
        name: '父母家',
        type: 1
      },{
        name: '隔壁老王家',
        type: 0
      }]
    }
    this.dataSource = new ListView.DataSource({
      rowHasChanged: ((row1, row2) => row1 !== row2)
    })
  }
  render() {
    return (
      <View style = {styles.container}>
        <NavigationBar
          title={'我的家庭'}
          statusBar={{backgroundColor: '#FFFFFF', barStyle: 'dark-content'}}
          style={{backgroundColor: '#FFFFFF', borderBottomWidth: 1, borderBottomColor: '#EDEDED'}}
          navigator={this.props.navigator}
        />
        <ListView style = {styles.list}
          dataSource = {this.dataSource.cloneWithRows(this.state.list)}
          renderRow = {this._renderRow.bind(this)}
        />
      </View>
    )
  }
  // 返回一个Item
  _renderRow(rowData) {
    return (
      <TouchableOpacity onPress = {this._onPressButton.bind(this, rowData)} >
        <View style = {styles.item}>
          <Text style = {styles.name}> {rowData.name} </Text>
          <View style = {styles.typeBody}>
            <Text style = {styles.type}>{rowData.type === 1 ? '管理员' : '成员'}</Text>
            <Icon name="icon_jiantou" size={16} color="#999999" />
          </View>
        </View>
      </TouchableOpacity>
    )
  }
  _onPressButton() {
    this.props.navigator.push({
      component: Login,
      params: {
        navigator: this.props.navigator
      }
    })
  }
}

export default FamilyInfo

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F4F4',
    flex: 1,
  },
  list: {
    flex: 1,
    borderTopColor: '#EDEDED',
    borderTopWidth: 1,
    borderBottomColor: '#EDEDED',
    borderBottomWidth: 1,
    marginTop: 10,
  },
  item: {
    height: 52,
    backgroundColor: '#ffffff',
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 20,
    paddingRight: 20,
  },
  name: {
    color: '#666666',
    fontSize: 14,
  },
  typeBody: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  type: {
    color: '#333333',
    fontSize: 13,
    marginRight: 10,
  }
})
